require('./PageDgzslist.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea, MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,
  MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,NavBar,NavBarItem,TabBody,Tab,InfiniteLoader,LoadMore,
  CellBody,CellFooter, Form,FormCell,Radio,Gallery,GalleryDelete,Uploader,TextArea} from  'react-weui/build/packages'
import test  from './../../../assets/img/10220215.png';
import zb  from './../../../assets/icon/zhzj/坐标.png';
import ht  from './../../../assets/icon/zhzj/话筒.png';
import yuanlinlvhua  from './../../../assets/img/园林绿化.png';
import ludeng  from './../../../assets/img/路灯.png';
import jingguandeng  from './../../../assets/img/景观灯.png';
import anquanwenming  from './../../../assets/img/安全文明施工.png';
import {Control} from 'react-keeper';


class Dgzslist extends React.Component {
  constructor(props) {
    super(props);
    this.loadMore = this.loadMore.bind(this);
    this.changeTab = this.changeTab.bind(this);
  }

  changeTab(e) {
    Actions.changeTab(e.target.getAttribute("value"));
  }


  loadMore(resolve, finish) {
    Actions.loadMore(resolve, finish);
  }


  render() {
    return (
      <Page infiniteLoader={false} ptr={false}>
        <Tab>
          <NavBar>
            <NavBarItem active={this.state.dgzslist.tab == 1} onClick={this.changeTab} value="1">
              <img width="20"
                   height="20"
                   src={ludeng}/>路灯</NavBarItem>
            <NavBarItem active={this.state.dgzslist.tab == 2} onClick={this.changeTab} value="2">
              <img width="20"
                   height="20"
                   src={jingguandeng}/>景观灯</NavBarItem>
            <NavBarItem active={this.state.dgzslist.tab == 3} onClick={this.changeTab} value="3">
              <img width="20"
                   height="20"
                   src={yuanlinlvhua}/>园林</NavBarItem>
            <NavBarItem active={this.state.dgzslist.tab == 4} onClick={this.changeTab} value="4">
              <img width="20"
                   height="20"
                   src={anquanwenming}/>安全</NavBarItem>
          </NavBar>
          <TabBody>
            <InfiniteLoader id="infs" ref="infs" onLoadMore={this.loadMore}  height={window.innerHeight-142}
                            loaderLoadingIcon={(<LoadMore loading>加载更多...</LoadMore>)}
                            loaderDefaultIcon={(<LoadMore showLine showDot>没有数据了</LoadMore>)}>

              <Panel>
                <PanelBody>
                {
                  this.state.dgzslist.suggestList && this.state.dgzslist.suggestList.map((item, i) => {
                    return (

                      <MediaBox type="appmsg" onClick={(e) =>
                        {Control.go('/dgzshome/edit',
                          {dataDetail:item
                          })}}>
                        <MediaBoxHeader>
                          {item.urlList.length > 0 ? <img src={item.urlList[0]}/> : <img src={item.suggesttype==1?ludeng:
                           item.suggesttype==2?jingguandeng:
                        item.suggesttype==3?anquanwenming:
                          item.suggesttype==4?yuanlinlvhua:null}/>}
                        </MediaBoxHeader>
                        <MediaBoxBody>
                          <MediaBoxTitle>{item.title}</MediaBoxTitle>
                          <MediaBoxDescription>
                            {item.viewdesc}
                          </MediaBoxDescription>
                          <MediaBoxInfo>
                            <MediaBoxInfoMeta>{item.createdTime}</MediaBoxInfoMeta>
                            <MediaBoxInfoMeta extra className="zt-color">{
                              item.datastatus == 2 ? '已撤销' :
                                item.viewstatus == 1 ? '已提交待回复' : '已回复'
                            }</MediaBoxInfoMeta>
                          </MediaBoxInfo>

                        </MediaBoxBody>
                      </MediaBox>

                    )
                  })}
              </PanelBody>
              </Panel>
            </InfiniteLoader>
            <div style={{backgroundColor:'#fff'}}>
              <Cell>
                <CellBody>
                  <ButtonArea>
                    <Button onClick={()=> {Control.go("/dgzshome/edit",{dataDetail:null
                          })}} style={{
              backgroundColor:"rgba(22, 155, 213, 1)"
            }}>
                      我要说
                    </Button>
                  </ButtonArea>
                </CellBody></Cell>
            </div>

          </TabBody>

        </Tab>

      </Page>
    );
  }

  componentWillMount() {
    console.log('====>>>>list');
    Actions.changeTab(Control.state.type);
  }

  componentDidMount() {

    //Actions.loadData();
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.dgzslist || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }


}

ReactMixin.onClass(Dgzslist, Reflux.connect(Store, 'dgzslist'));


export default Dgzslist ;
